@xlpx: 48px;
@lgpx: 24px;
@mdpx: 16px;
@smpx: 8px;
@xspx: 4px;
.spacing(@name, @px) {
  .mt-@{name} {
    margin-top: @px;
  }
  .ml-@{name} {
    margin-left: @px;
  }
  .mr-@{name} {
    margin-right: @px;
  }
  .mb-@{name} {
    margin-bottom: @px;
  }
  .pt-@{name} {
    padding-top: @px;
  }
  .pl-@{name} {
    padding-left: @px;
  }
  .pr-@{name} {
    padding-right: @px;
  }
  .pb-@{name} {
    padding-bottom: @px;
  }
  .mx-@{name} {
    margin-right: @px;
    margin-left: @px;
  }
  .my-@{name} {
    margin-bottom: @px;
    margin-top: @px;
  }
  .ma-@{name} {
    margin-right: @px;
    margin-left: @px;
    margin-bottom: @px;
    margin-top: @px;
  }
  .px-@{name} {
    padding-right: @px;
    padding-left: @px;
  }
  .py-@{name} {
    padding-bottom: @px;
    padding-top: @px;
  }
  .pa-@{name} {
    padding-right: @px !important;
    padding-left: @px !important;
    padding-bottom: @px !important;
    padding-top: @px !important;
  }
}
.spacing(none, 0px);
.spacing(xl, @xlpx);
.spacing(lg, @lgpx);
.spacing(md, @mdpx);
.spacing(sm, @smpx);
.spacing(xs, @xspx);

.height-percent-100 {
  height: 100%;
}
.max-height-vh100 {
  max-height: 100vh;
}

.flex {
  display: flex;
}
.justify-between {
  justify-content: space-between;
}
.justify-start {
  justify-content: flex-start;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.items-center {
  align-items: center;
}
.center {
  display: grid;
  place-content: center;
}
.flex-1 {
  flex: 1 1 0%;
}
